import React, { Component } from "react";
import { Link, Route, Switch } from "react-router-dom";

// 嵌套路由的做法是在下一级路由组件里面继续使用Link、Switch、Route等组件
// 如果一个组件有下一级路由，那么这个组件不能添加exact
class Hot extends Component {
  render() {
    return <div>这是热映页面</div>;
  }
}

class Wait extends Component {
  render() {
    return <div>这是待映页面</div>;
  }
}

class Home extends Component {
  render() {
    // 当一个组件作为了路由组件，那么props里面就会自动地添加路由信息
    // console.log(this.props);

    // 二次解构
    const {
      match: { url },
    } = this.props;

    return (
      <>
        <div>这是首页页面</div>
        <ul>
          <li>
            <Link to={`${url}/hot`}>热映</Link>
          </li>
          <li>
            <Link to={`${url}/wait`}>待映</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route path={`${url}/hot`} component={Hot}></Route>
          <Route path={`${url}/wait`} component={Wait}></Route>
        </Switch>
      </>
    );
  }
}

const About = () => {
  return <div>这是关于页面</div>;
};

class App extends Component {
  render() {
    return (
      <>
        <h2>路由嵌套</h2>
        <ul>
          <li>
            <Link to="/home2">首页</Link>
          </li>
          <li>
            <Link to="/about">关于页</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route path="/home2" component={Home}></Route>
          <Route path="/about" component={About}></Route>
        </Switch>
      </>
    );
  }
}

export default App;
